<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>上传图片</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="js/imagecropper/cropper.css" />
		<!--<style type="text/css">
			#uploadList {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 10px 0;
				padding-bottom: calc(10px - 2vw);
			}
			
			#uploadList>div {
				position: relative;
				width: 32vw;
				height: 32vw;
				margin: 0 2vw 2vw 0;
			}
			
			#uploadList img {
				width: 100%;
				height: 100%;
			}
			
			#uploadList .btnlist {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				/*height: 100%;*/
				z-index: 9999;
				display: flex;
				justify-content: space-around;
			}
			
			#uploadList>div.mui-icon:before {
				position: absolute;
				left: 0;
				top: 0;
				font-size: 60px;
				height: 100%;
				width: 100%;
				line-height: 32vw;
				text-align: center;
				color: chartreuse;
			}
			
			#uploadList>div.uploading:before {
				color: #ECB100;
				font-size: 50px;
				-webkit-transform-origin: 50%;
				transform-origin: 50%;
				-webkit-animation: spinner-spin .6s step-end infinite;
				animation: spinner-spin .6s step-end infinite;
			}
			
			#uploadList>div.mui-icon-closeempty:before {
				color: #FF5053;
			}
			
			#uploadList>div:nth-child(3n) {
				margin: 0 0 2vw 0;
			}
			
			#showEdit {
				width: 100%;
				height: 100%;
				background-color: #fff;
				position: fixed;
				top: 0;
				left: 0;
				display: none;
				z-index: 9;
				background: #333;
			}
			
			#report {
				height: 100%;
				width: 100%;
				z-index: 10;
			}
			
			#readyimg {
				width: 100%;
			}
			
			#showEdit .flex-container {
				background: #FAFAFA;
				line-height: 60px;
				display: flex;
				justify-content: space-around;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				opacity: .8;
			}
			
			.mui-btn {
				height: 40px;
				padding: 0;
			}
			
			#addbtn {
				width: 32vw;
				height: 32vw;
				margin: 0 0 2vw 0;
				line-height: 32vw;
				text-align: center;
				font-size: 70px;
				display: inline-block;
				vertical-align: top;
			}
		</style>-->
	</head>

	<body>
		<div id="uploadList">
			<!--<div class="pic">
				<p class="btnlist mui-hidden">
					<button class="mui-icon mui-icon-trash"></button>
					<button class="mui-icon mui-icon-compose"></button>
				</p>
				<img src="../images/huoying1.jpg" />
			</div>-->
			<!--<a id="addbtn" class="mui-icon mui-icon-plus" href="#picture"></a>-->
		</div>
		<button id="startUpload" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认提交</button>
		<!--<div id="showEdit">
			<div id="report">
				<div class="pic">
					<p class="btnlist mui-hidden">
						<button class="mui-icon mui-icon-trash"></button>
						<button class="mui-icon mui-icon-compose"></button>
					</p>
					<img src="" />
				</div>
				<img id="readyimg">
			</div>
			<div class="flex-container">
				<a onclick="closepop()"><span class="mui-icon mui-icon-closeempty"></span>关闭</a>
				<a onclick="rotateimgleft()"><span class="mui-icon mui-icon-undo"></span>左旋转</a>
				<a onclick="rotateimg()"><span class="mui-icon mui-icon-redo"></span>右旋转</a>
				<a onclick="confirm()"><span class="mui-icon mui-icon-checkmarkempty"></span>确定</a>
			</div>
		</div>
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="getImage">拍照</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="galleryImgs">图库</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture" id="cancel"><b>取消</b></a>
				</li>
			</ul>
		</div>-->
	</body>

</html>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/imagecropper/cropper.js"></script>
<script type="text/javascript">
	qiniuupload({
		uploadListId:"uploadList",
		startUploadId:"startUpload",
		uptokenUrl:'http://10.8.45.1:8080/qiniuTest/getToken?bucket=test1',
		picUrl:"http://ongwb2t5i.bkt.clouddn.com/"
	});

	function qiniuupload(obj) {
		editAndpicAndcss();
		function editAndpicAndcss() {
			var strEdit = "";
			var strVar = "";
			var strAdd = "";
			
			strEdit += "<div id=\"showEdit\">\n";
			strEdit += "	<div id=\"report\">\n";
			strEdit += "		<div class=\"pic\">\n";
			strEdit += "			<p class=\"btnlist mui-hidden\">\n";
			strEdit += "				<button class=\"mui-icon mui-icon-trash\"><\/button>\n";
			strEdit += "				<button class=\"mui-icon mui-icon-compose\"><\/button>\n";
			strEdit += "			<\/p>\n";
			strEdit += "			<img src=\"\"/>\n";
			strEdit += "		<\/div>\n";
			strEdit += "		<img id=\"readyimg\">\n";
			strEdit += "	<\/div>\n";
			strEdit += "	<div class=\"flex-container\">\n";
			strEdit += "		<a id='closepop'><span class=\"mui-icon mui-icon-closeempty\"><\/span>关闭<\/a>\n";
			strEdit += "		<a id='rotateimgleft'><span class=\"mui-icon mui-icon-undo\"><\/span>左旋转<\/a>\n";
			strEdit += "		<a id='rotateimg'><span class=\"mui-icon mui-icon-redo\"><\/span>右旋转<\/a>\n";
			strEdit += "		<a id='confirm'><span class=\"mui-icon mui-icon-checkmarkempty\"><\/span>确定<\/a>\n";
			strEdit += "	<\/div>\n";
			strEdit += "<\/div>\n";
			strEdit += "<div id=\"picture\" class=\"mui-popover mui-popover-action mui-popover-bottom\">\n";
			strEdit += "	<ul class=\"mui-table-view\">\n";
			strEdit += "		<li class=\"mui-table-view-cell\">\n";
			strEdit += "		<a href=\"#\" id=\"getImage\">拍照<\/a>\n";
			strEdit += "		<\/li>\n";
			strEdit += "		<li class=\"mui-table-view-cell\">\n";
			strEdit += "		<a href=\"#\" id=\"galleryImgs\">图库<\/a>\n";
			strEdit += "		<\/li>\n";
			strEdit += "	<\/ul>\n";
			strEdit += "	<ul class=\"mui-table-view\">\n";
			strEdit += "		<li class=\"mui-table-view-cell\">\n";
			strEdit += "		<a href=\"#picture\" id=\"cancel\"><b>取消<\/b><\/a>\n";
			strEdit += "		<\/li>\n";
			strEdit += "	<\/ul>\n";
			strEdit += "<\/div>\n";

			strVar += "<style type=\"text/css\">\n";
			strVar += "			#"+obj.uploadListId+" {\n";
			strVar += "				display: flex;\n";
			strVar += "				justify-content: flex-start;\n";
			strVar += "				flex-wrap: wrap;\n";
			strVar += "				padding: 10px 0;\n";
			strVar += "				padding-bottom: calc(10px - 2vw);\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+">div {\n";
			strVar += "				position: relative;\n";
			strVar += "				width: 32vw;\n";
			strVar += "				height: 32vw;\n";
			strVar += "				margin: 0 2vw 2vw 0;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+" img {\n";
			strVar += "				width: 100%;\n";
			strVar += "				height: 100%;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+" .btnlist {\n";
			strVar += "				position: absolute;\n";
			strVar += "				left: 0;\n";
			strVar += "				top: 0;\n";
			strVar += "				width: 100%;\n";
			strVar += "				/*height: 100%;*/\n";
			strVar += "				z-index: 9999;\n";
			strVar += "				display: flex;\n";
			strVar += "				justify-content: space-around;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+">div.mui-icon:before {\n";
			strVar += "				position: absolute;\n";
			strVar += "				left: 0;\n";
			strVar += "				top: 0;\n";
			strVar += "				font-size: 60px;\n";
			strVar += "				height: 100%;\n";
			strVar += "				width: 100%;\n";
			strVar += "				line-height: 32vw;\n";
			strVar += "				text-align: center;\n";
			strVar += "				color: chartreuse;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+">div.uploading:before {\n";
			strVar += "				color: #ECB100;\n";
			strVar += "				font-size: 50px;\n";
			strVar += "				-webkit-transform-origin: 50%;\n";
			strVar += "				transform-origin: 50%;\n";
			strVar += "				-webkit-animation: spinner-spin .6s step-end infinite;\n";
			strVar += "				animation: spinner-spin .6s step-end infinite;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+">div.mui-icon-closeempty:before {\n";
			strVar += "				color: #FF5053;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#"+obj.uploadListId+">div:nth-child(3n) {\n";
			strVar += "				margin: 0 0 2vw 0;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#showEdit {\n";
			strVar += "				width: 100%;\n";
			strVar += "				height: 100%;\n";
			strVar += "				background-color: #fff;\n";
			strVar += "				position: fixed;\n";
			strVar += "				top: 0;\n";
			strVar += "				left: 0;\n";
			strVar += "				display: none;\n";
			strVar += "				z-index: 9;\n";
			strVar += "				background: #333;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#report {\n";
			strVar += "				height: 100%;\n";
			strVar += "				width: 100%;\n";
			strVar += "				z-index: 10;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#readyimg {\n";
			strVar += "				width: 100%;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#showEdit .flex-container {\n";
			strVar += "				background: #FAFAFA;\n";
			strVar += "				line-height: 60px;\n";
			strVar += "				display: flex;\n";
			strVar += "				justify-content: space-around;\n";
			strVar += "				position: fixed;\n";
			strVar += "				bottom: 0;\n";
			strVar += "				left: 0;\n";
			strVar += "				width: 100%;\n";
			strVar += "				opacity: .8;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			.mui-btn {\n";
			strVar += "				height: 40px;\n";
			strVar += "				padding: 0;\n";
			strVar += "			}\n";
			strVar += "			\n";
			strVar += "			#addbtn {\n";
			strVar += "				width: 32vw;\n";
			strVar += "				height: 32vw;\n";
			strVar += "				margin: 0 0 2vw 0;\n";
			strVar += "				line-height: 32vw;\n";
			strVar += "				text-align: center;\n";
			strVar += "				font-size: 70px;\n";
			strVar += "				display: inline-block;\n";
			strVar += "				vertical-align: top;\n";
			strVar += "			}\n";
			strVar += "		<\/style>\n";
			
			strAdd += "<a id=\"addbtn\" class=\"mui-icon mui-icon-plus\" href=\"#picture\"><\/a>\n";
			$("head").append(strVar);
			$("body").append(strEdit);
			$("#"+obj.uploadListId).append(strAdd);
		}
		getUptoken();
		var xhrNumber = 0;
		//拍照  
		function getImage() {
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(p) {
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					var localurl = entry.toLocalURL();
					var newItem = addpicItem(localurl);
					$("#addbtn").before(newItem);
				});
			});
		}
		//相册选取  
		function galleryImgs() {
			plus.gallery.pick(function(e) {
				var newItem = addpicItem(e);
				$("#addbtn").before(newItem);
			}, function(e) {
				//outSet( "取消选择图片" );  
			}, {
				filter: "image"
			});
		}

		//照片裁剪类  
		function cutImg() {
			$("#showEdit").fadeIn();
			var $image = $('#report > img');
			$image.cropper({
				checkImageOrigin: true,
				aspectRatio: 1 / 1,
				autoCropArea: 0.3,
				zoom: -0.2
			});
			//                  $image.cropper('zoom',-0.5);  
		}

		//确认照片，展示效果  
		$("#confirm").on("tap",confirm);
		$("#rotateimg").on("tap",rotateimg);
		$("#rotateimgleft").on("tap",rotateimgleft);
		$("#closepop").on("tap",closepop);
		function confirm() {
			$("#showEdit").fadeOut();
			var $image = $('#report > img');
			var dataURL = $image.cropper("getCroppedCanvas");
			//var imagurl = dataURL.toString();
			var imgurl = dataURL.toDataURL("image/jpeg");
			$(".cuting").attr("src", imgurl);
			$(".cuting").removeClass("cuting");
			var $image = $('#report > img');
			$image.cropper('destroy');
		}
		//旋转照片  
		function rotateimg() {
			$("#readyimg").cropper('rotate', 90);
		}

		function rotateimgleft() {
			$("#readyimg").cropper('rotate', -90);
		}

		function closepop() {
			$("#showEdit").fadeOut();
			var $image = $('#report > img');
			$image.cropper('destroy');
		}

		function getUptoken(bol) { //获得服务器验证uptoken
			if(bol || !sessionStorage.uptoken) {
				$.ajax({
					//url: 'http://192.168.146.134:8080/qiniuTest/getToken?bucket=test1',
					//url: 'http://10.8.45.1:8080/qiniuTest/getToken?bucket=test1',
					//url: 'http://10.8.45.39:8080/qiniuTest/getToken?bucket=test1',
					url: obj.uptokenUrl,
					type: "get",
					timeout: 10000,
					dataType: "jsonp",
					jsonp: "callback",
					jsonpCallback: "qiniucallback",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					success: function(data) {
						sessionStorage.uptoken = data.uptoken;
					}
				});
			};
		};

		function addpicItem(src) { //传进来的url去生成一个div包裹图片和按钮
			var strVar = "";
			strVar += "<div class=\"pic\">\n";
			strVar += "<p class=\"btnlist mui-hidden\">\n";
			strVar += "		<button class=\"mui-icon mui-icon-trash\"><\/button>\n";
			strVar += "		<button class=\"mui-icon mui-icon-compose\"><\/button>\n";
			strVar += "<\/p>";
			strVar += "<img src='" + src + "'/>";
			strVar += "<\/div>";
			return strVar;
		}

		function getBase64($img) {
			var newImg = document.createElement('img'); //得到img的原始尺寸去创建
			newImg.src = $img.attr("src");
			newImg.onload = function() {
				var data = getBase64Image(newImg);
				putb64(data, -1, $img);
			}

			//				document.body.appendChild(img);
		}

		function getBase64Image(img) { //获得img的base64

			var canvas = document.createElement("canvas");
			canvas.width = img.width;
			canvas.height = img.height;

			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0, img.width, img.height);

			var dataURL = canvas.toDataURL("image/jpeg", 0.6);
			return dataURL
		}

		function putb64(base64, size, $img) { //上传到7牛base64的图片，size未64时的大小，严重token。
			var pic = base64.replace("data:image/jpeg;base64,", "");
			var xhr = new XMLHttpRequest();
			var url = "http://upload.qiniu.com/putb64/" + size;
			var picUrl = "";
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4) {
					//这里可以判断图片上传成功,而且可以通过responseText获取图片链接
					//						var data = JSON.parse(xhr.responseText);
					//						console.log(xhr.responseText);
					//图片链接就是yourcdnpath.xx/data.key
					var keyText = xhr.responseText;

					/*返回的key是字符串，需要装换成json*/
					keyText = strToJson(keyText);

					/* http://oe8wmyqo6.bkt.clouddn.com/是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
					if(keyText.key) {
						picUrl = obj.picUrl +"/"+ keyText.key;
						$img.parent().removeClass("uploading mui-icon-spinner-cycle").addClass("mui-icon-checkmarkempty");
					} else {
						$img.parent().removeClass("uploading mui-icon-spinner-cycle").addClass("mui-icon-closeempty");
						picUrl = "上传错误,请重新上传！";
					};
					var newImgUrl = document.createElement("input");
					newImgUrl.type = "text";
					newImgUrl.value = picUrl;
					$("#"+obj.uploadListId).after(newImgUrl);
					xhrNumber--;
					if(xhrNumber == 0) {
						$("#"+obj.startUploadId).removeClass("mui-disabled");
					};

					function strToJson(str) {
						var json = eval('(' + str + ')');
						return json;
					}
				}
			}
			xhr.open("POST", url, true);
			xhr.setRequestHeader("Content-Type", "application/octet-stream");
			xhr.setRequestHeader("Authorization", "UpToken " + sessionStorage.uptoken);
			xhr.send(pic);
		}

		mui('#picture').on('tap', '.mui-popover-action li>a', function() { //呼出actionsheet菜单
			var a = this;
			//根据点击按钮，反推当前是哪个actionsheet
			if(a.id == "getImage") {
				getImage();
			} else if(a.id == "galleryImgs") {
				galleryImgs();
			};
			mui('#picture').popover('toggle');
		})
		$("#"+obj.startUploadId).click(function() { //点击开始上传事件
			xhrNumber = 0;
			var $uploadimgArr = $("#"+obj.uploadListId+" div").not($(".mui-disabled"));
			$uploadimgArr.addClass("uploading mui-icon mui-icon-spinner-cycle mui-spin");
			if($uploadimgArr.length == 0) {
				mui.toast("没有未上传的图片");
				return;
			};
			$("#"+obj.startUploadId).addClass("mui-disabled");
			for(var i = 0; i < $uploadimgArr.length; i++) {
				xhrNumber++;
				$uploadimgArr.eq(i).addClass("mui-disabled");
				getBase64($uploadimgArr.eq(i).find("img"));
			};
			getUptoken(true);
		});
		$("#"+obj.uploadListId)[0].addEventListener("tap", function(ev) {　 //编辑和删除按钮的事件委托
			var ev = ev || window.event;　　　　
			var target = ev.target || ev.srcElement;
			if(target.nodeName == 'IMG') { //是点击的图片，隐藏或者显示按钮
				var $p = $(target.previousElementSibling);
				if($p.hasClass("mui-hidden")) {
					$p.removeClass("mui-hidden");
				} else {
					$p.addClass("mui-hidden");;
				};
			} else if(target.nodeName == "BUTTON") { //点击的是按钮，根据按钮选择功能
				var $btn = $(target);
				if($btn.hasClass("mui-icon-trash")) {
					$btn.parent().parent().remove();
				} else {
					var src = $btn.parent().siblings().attr("src");
					$btn.parent().siblings().addClass("cuting");
					$("#readyimg").attr("src", src);
					cutImg();
				}
				$btn.parent().addClass("mui-hidden");
			}
		})

	}
</script>